<template>
  <el-dialog title="审核意见" :visible.sync="opinion.dialogVisible" size="tiny">
        <span class="title">审核意见</span>
        <div v-loading="loading">
            <el-form :model="form" :rules="rules" ref="form" >
                <el-form-item label="" prop="textarea">
                    <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}" placeholder="请输入审核意见" v-model="form.textarea"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-row type="flex" class="row-bg" justify="center">
                    <el-col :span="4"><el-button @click="cancel">取 消</el-button></el-col>
                    <el-col :span="4"><el-button type="primary" @click="confirm('form')">确 定</el-button></el-col>
                </el-row>
            </span>
        </div>
    </el-dialog>       
</template>
<script>
import { auditAdvert} from 'api/advApi';
export default {
    name: 'layerUp',
    data() {
        return {
            dialogVisible: false,
            form: {
                textarea: ''
            },
            loading: false,
            rules: {
                textarea: [
                    { required: true, message: '请填写审核意见', trigger: 'blur' },
                    { min: 3, max: 100, message: '长度为 3 到 100 个汉字', trigger: 'blur' },
                    { pattern: /^[^ ]+$/, message: '请勿输入空格', trigger: 'change'}
                ]
            }
        };
    },
    props: {
        opinion: {
            type: Object,
            required: true
        }
    },
    methods: {
        cancel() {
            this.form.textarea = '';
            this.opinion.dialogVisible = false;
        },
        confirm(form) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                    if (this.opinion.start === '0') {
                        this.loading = true;
                        // 通过并上线 初始化
                        auditAdvert(this.$route.params.id, this.opinion.start, this.form.textarea).then(data => {
                            this.loading = false;
                            this.form.textarea = '';
                            this.$message({
                                message: '恭喜你，通过成功！',
                                type: 'success'
                            });
                            this.$store.dispatch('UpdateCache', true);
                            this.$router.go(-1);
                        }).catch(Error => {
                            this.loading = false;
                        })
                    } else {
                        // 驳回
                        this.loading = true;
                        auditAdvert(this.$route.params.id, this.opinion.start, this.form.textarea).then(data => {
                            this.loading = false;
                            this.form.textarea = '';
                            this.$message({
                                message: '恭喜你，驳回成功！',
                                type: 'success'
                            });
                            this.$store.dispatch('UpdateCache', true);
                            this.$router.go(-1);
                        }).catch(Error => {
                            this.loading = false;
                        })
                    }
                } else {
                    return false;
                }
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.title{
    font-size: 18px;
    color: #333;
    position: relative;
    padding-left: 18px;
    display: block;
    padding-bottom: 20px;
    &::after{
        position: absolute;
        content: "";
        width: 4px;
        height: 14px;
        background: #ff5e2c;
        left: 0px;
        top: 2px;
    }
}
</style>
